import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  FileOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme, ConfigProvider } from 'antd';
import { useHistory } from 'react-router-dom';

const { Header, Sider,Content } = Layout;

const Audit = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const [collapsed, setCollapsed] = useState(false);
    const [isAudited, setIsAudited] = useState(false);

    // 更改页面
    const [value, setValue] = useState('');
    const handleSider = (e) => {
        setValue(e.key);
    }
    const history = useHistory();
    // 点击已审核，颜色变为绿色
    const handleAudited = () => {
        setIsAudited(true);
    }
    // 点击未审核，跳转到未审核页面
    const handleNotAudited = () => {
        setIsAudited(false);
        history.push("/Naudit");
    }
    // 点击用户管理，跳转到用户管理页面
    const userClick = () => {
        history.push("/Usermanagement");
    }
    // 点击查看评论，跳转到查看评论页面
    const commentClick = () =>{
        history.push("/Comment");
    }
    // 点击删除，删除已审核的内容
    const handleDelete = () =>{
        
    }
    return (
        // 主题颜色
        <ConfigProvider
            theme={{
                token: {
                    // Seed Token，影响范围大
                    colorPrimary: '#55CA92',
                    borderRadius: 20,
                    // 派生变量，影响范围小
                    colorBgContainer: '#55CA92',
                },
            }}
        >
        <Layout>
            <Sider 
            style={{
                borderRadius: 20,
                background: '#95de64',
                marginRight: 33,
                width: 500,
            }}
            trigger={null}
            collapsible
            collapsed={collapsed}>
            {/* 导航栏 */}
            <Menu
                style={{
                    background: '#55CA92',
                    borderRadius: 20,
                    minHeight: '98vh'
                    }}
                mode="inline"
                defaultSelectedKeys={['1']}
                onClick={handleSider}
                selectedKeys={[value]}
            >
                <Menu.Item 
                key="1" 
                icon={<UserOutlined />} 
                label="用户管理" 
                style={{marginTop:120}}
                onClick={userClick}
                >
                    用户管理
                </Menu.Item>
                <Menu.Item 
                key="2" 
                icon={<FileOutlined />} 
                label="内容审核" 
                style={{marginTop:40}}
                >
                    内容审核
                </Menu.Item>
            </Menu>
            </Sider>
            {/* Header头部 */}
            <Layout>
                <Header 
                    style={{
                        padding: 0,
                        background: '#F7F3F3',
                        margin: 10,
                        height: 50,
                        borderRadius: 10,
                        display: 'flex',
                     }}
                >
                    {/* 导航收起按钮 */}
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 33,
                            height: 33,
                            margin: '10px',
                        }}
                    />
                    <div 
                        style={{
                            width:400,
                            border:'1px solid #BEBEBE',
                            borderRadius:10,
                            textAlign:'center',
                            marginLeft:40,
                            background: isAudited ? '#E2E2E2' : '#55CA92',
                            color: isAudited ? '' : 'white',
                            cursor: 'pointer',
                            boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.3)",
                            fontSize:20,
                            fontWeight:'bold',
                        }}
                        onClick={handleAudited}
                    >
                        <span>已审核</span>
                    </div>
                    <div 
                        style={{
                            width:400,
                            border:'1px solid #BEBEBE',
                            textAlign:'center',
                            borderRadius:10,
                            marginLeft:30,
                            background: !isAudited ? '#E2E2E2' : '#55CA92',
                            color: isAudited ? 'white' : '',
                            cursor: 'pointer',
                            boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.3)",
                            fontSize:20,
                            fontWeight:'bold',
                        }}
                        onClick={handleNotAudited}
                        >
                        <span>未审核</span>
                    </div>
                </Header>
                <Content
                    style={{
                        margin: '20px 16px',
                        padding: 24,
                        minHeight:'76vh',
                        background:colorBgContainer,
                        borderRadius:20,
                        maxHeight:'82vh',
                        overflow:'scroll',
                    }}
                >
                    {/* 一个帖子的容器设置 */}
                    <div>
                        <div style={{
                            height:150,
                            border:'1px solid #BEBEBE',
                            borderRadius:5,
                            }}
                        >
                            <div style={{
                                borderRadius:5,
                                fontSize:16,
                                marginTop:117,
                            }}
                            >
                                <button style={{
                                    marginLeft:50,
                                    width:100,
                                    height:30,
                                    background:'#55CA92',
                                    borderRadius:5,
                                    border:'1px solid #BEBEBE',
                                }}
                                onClick={commentClick}
                                >
                                    查看评论
                                </button>
                                <button style={{
                                    marginLeft:540,
                                    width:100,
                                    height:30,
                                    background:'#55CA92',
                                    borderRadius:5,
                                    border:'1px solid #BEBEBE'
                                }}
                                onClick={handleDelete}
                                >
                                    删除
                                </button>
                            </div>
                        </div>
                        <div style={{
                            borderRadius:5,
                            fontSize:16,
                            marginTop:20,
                        }}
                        >
                        </div>
                    </div>  
                </Content>
                </Layout>
            </Layout>
        </ConfigProvider>
    );
};

export default Audit;